<template>
    <div style="margin: 10px">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基础信息" name="first">
                <el-form ref="userinfo" :rules="rules_userinfo" :model="temp_userinfo" label-position="left" label-width="70px" style="width: 400px; margin-left: 50px">
                    <el-form-item :label="$t('手机号')" prop="mobile">
                        <el-input v-model="temp_userinfo.mobile" />
                    </el-form-item>
                    <el-button type="primary" @click="updateUser">保存</el-button>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="用户密码" name="second">
                <div class="createPost-container">
                    <Login :uid="uid" />
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import { fetch, updateUser } from '@/ucenter/api/user'

import Login from '@/ucenter/components/Login'

export default {
    components: { Login },
    data() {
        const validateMobile = (rule, value, callback) => {
            var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/
            if (!myreg.test(value)) {
                this.$message({
                    message: rule.message,
                    type: 'error'
                })
                callback(new Error())
            } else {
                callback()
            }
        }
        const validateRequire = (rule, value, callback) => {
            if (value === '') {
                this.$message({
                    message: rule.message,
                    type: 'error'
                })
                callback(new Error())
            } else {
                callback()
            }
        }
        return {
            uid: 0,
            activeName: 'first',
            user: {},
            dialogUsernameVisible: false,
            // userinfo

            temp_userinfo: {
                mobile: ''
            },
            rules_userinfo: {
                mobile: [{ validator: validateMobile, message: '请输入有效手机号', trigger: 'blur' }]
            },

            temp_username: {
                username: ''
            },
            rules_username: {
                username: [{ validator: validateRequire, message: '新用户名为必填字段', trigger: 'blur' }]
            },
            dialogPasswordVisible: false,
            temp_password: {
                password: '',
                password_confirm: ''
            },
            rules_password: {
                password: [{ validator: validateRequire, message: '新用户密码为必填字段', trigger: 'blur' }],
                password_confirm: [{ validator: validateRequire, message: '新用户确认密码为必填字段', trigger: 'blur' }]
            },
            loading: false,
            tempRoute: {}
        }
    },
    computed: {

    },
    created() {
        this.uid = parseInt(this.$route.query.uid)
        const query = { uid: parseInt(this.$route.query.uid) }
        fetch(query).then((response) => {
            this.user = response.data
            this.temp_userinfo.mobile = this.user.mobile
            // Just to simulate the time of the request
            setTimeout(() => {
                this.loading = false
            }, 1.5 * 1000)
        })
    },
    methods: {
        handleClick() {

        },
        updateUser() {
            this.$refs.userinfo.validate(valid => {
                if (valid) {
                    this.loading = true
                    const data = this.temp_userinfo
                    data.uid = this.uid
                    updateUser(data).then(response => {
                        if (response.errorCode == 200) {
                            this.$notify({
                                title: '成功',
                                message: '修改用户信息成功',
                                type: 'success',
                                duration: 2000
                            })
                            this.dialogUsernameVisible = false
                            this.loading = false
                            this.$router.push('/crm/user/index')
                        } else {
                            this.$message({
                                message: response.errorMsg,
                                type: 'error'
                            })
                            this.loading = false
                        }

                    }).catch(err => {
                        console.log(err)
                        this.loading = false
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        }
    }
}
</script>
